<template>
  <div>
    <!-- 头部背景区 -->
    <a-row class="header-banner-box">
      <a-col :xs="0" :sm="0" :md="24">
        <div class="header-banner"></div>
      </a-col>
    </a-row>
    <!-- 首页banner区 -->
    <a-row class="index-banner-box" :gutter="[15, 15]" type="flex">
      <a-col :xs="24" :sm="24" :md="17">
        <!-- 轮播图 -->
        <a-carousel :after-change="onChange" dots arrows autoplay>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px; z-index: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div>
            <img src="../assets/lunbo1.jpg" alt="" width="100%" height="100%" />
          </div>
          <div>
            <img src="../assets/lunbo2.jpg" alt="" width="100%" height="100%" />
          </div>
        </a-carousel>
      </a-col>
      <a-col :xs="24" :sm="24" :md="7" class="banner-fix-img">
        <a href="">
          <div class="mask"></div>
          <img src="../assets/2021.jpg" alt="" width="100%" />
          <span class="banner-text">2021 学习目标</span>
        </a>
        <a
          href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner"
          target="view_window"
        >
          <div class="mask"></div>
          <img src="../assets/疫情.jpg" alt="" width="100%" />
          <span class="banner-text">最新疫情追踪</span>
        </a>
      </a-col>
    </a-row>
    <!-- 主体内容区 -->
    <div class="content-box">
      <a-row :gutter="20">
        <!-- 左侧列表 -->
        <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
          <a-card id="articleListCard">
            <a-tabs
              v-model="activeKey"
              default-active-key="1"
              @change="tabChangeCallback"
            >
              <a-tab-pane
                v-for="pane in panes"
                :key="pane.key"
                :tab="pane.title"
              >
                <keep-alive>
                  <ArticleList
                    :listFlag="activeKey === '1' ? 'latest' : 'hotest'"
                    :key="activeKey"
                  ></ArticleList>
                </keep-alive>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
        <!-- 右侧介绍 -->
        <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6">
          <Author></Author>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import ArticleList from "./ArticleList/ArticleList";
import Author from "./Author/Author";

export default {
  data() {
    const panes = [
      { title: "最新", key: "1" },
      { title: "最热", key: "2" },
    ];
    return {
      activeKey: panes[0].key,
      panes,
    };
  },
  components: {
    ArticleList,
    Author,
  },
  mounted() {
    // 发请求
  },
  methods: {
    // 轮播图
    onChange(a, b, c) {
      // console.log(a, b, c);
    },
    // 选项卡切换
    tabChangeCallback(activeKey) {
      //console.log(activeKey)
    },
  },
};
</script>

<style lang="less" scoped>
.header-banner {
  height: 170px;
  margin-top: -48px;
  background: url("/images/1033-1920x170.jpg") no-repeat center;
  background-size: cover;
}
// 版心
.index-banner-box {
  max-width: 1200px;
  padding: 8.5px;
  margin: 0 auto !important;
}
// 轮播图
.ant-carousel {
  /deep/ .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.7;
    &:before {
      display: none;
    }
    &:hover {
      width: 25px;
      height: 25px;
      font-size: 25px;
      color: #fff;
      background-color: rgba(31, 45, 61, 0.11);
      opacity: 0.8;
    }
  }
}
// 右侧两张图
.banner-fix-img {
  display: flex;
  flex-direction: column;
  a {
    flex: 1;
    position: relative;
    &:hover {
      .mask {
        display: block;
      }
    }
    &:first-child {
      margin-bottom: 15px;
    }
  }
}
.mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.banner-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
  line-height: 2;
  color: #fff;
  font-weight: bold;
  padding: 0 10px;
}
// 主体内容区
.content-box {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto !important;
}
// 响应式布局
@media screen and (max-width: 768px) {
  // 小屏幕上padding
  .indexMainPage {
    padding-top: 63px;
  }
  .index-banner-box {
    padding: 0 7.5px;
  }
  .banner-fix-img {
    flex-direction: row;
    a {
      &:first-child {
        margin-bottom: 0;
        margin-right: 15px;
      }
    }
  }
}
</style>